import React, { Component } from "react";
import propsTyps from "prop-types";
import { withRouter } from "react-router-dom";

import styles from  "./index.module.css"

class Catitem extends Component {
    // 类型约定
    static propType = {
        data: propsTyps.shape({
            url: propsTyps.string.isRequired,
            catiSrc: propsTyps.string.isRequired,
        }).isRequired,
    };

    render() {
        let { history, data } = this.props;
    
        return (
            <div className={styles.catitem}>
                {data &&
                    data.map((item, index) => {
                        return (
                            <div
                                key={index}
                                onClick={() => history.push(item.url)}
                            >
                                <img src={item.catiSrc} alt="" />
                            </div>
                        );
                    })}
            </div>
        );
    }
}

export default withRouter(Catitem);
